<div class="uk-panel uk-panel-box width-medium-1-2 address-wrap">
  <div class="uk-panel-badge uk-badge">
    <i class="iconfont">&#xe66c;</i>
  </div>
  <h3 class="uk-panel-title">选择新地址</h3>
  <div class="selected-address">
    <div class="selected-province selected-address-detail active"
         [ngClass]="{'active': !selectedAddress.provinceWasSelected}">
      <span *ngIf="!selectedAddress.provinceWasSelected">请选择</span>
      <span
        *ngIf="selectedAddress.provinceWasSelected"
      (click)="onSelectedTabPro ()">
      {{selectedAddress.selectedProvince}}
    </span>
    </div>
    <div class="selected-city selected-address-detail"
         [ngClass]="{'active': !selectedAddress.cityWasSelected && selectedAddress.provinceWasSelected}">
      <span *ngIf="!selectedAddress.cityWasSelected">请选择</span>
      <span
        *ngIf="selectedAddress.cityWasSelected"
        (click)="onSelectedTabCity()">
        {{selectedAddress.selectedCity}}
      </span>
    </div>
    <div class="selected-county selected-address-detail"
         *ngIf="selectedAddress.cityWasSelected"
         [ngClass]="{'active': !selectedAddress.countyWasSelected && selectedAddress.cityWasSelected || selectedAddress.countyWasSelected}">
      <span *ngIf="!selectedAddress.countyWasSelected">请选择</span>
      <span
        *ngIf="selectedAddress.countyWasSelected"
        (click)="onSelectedTabCounty()">
        {{selectedAddress.selectedCounty}}
      </span>
    </div>
  </div>
  <ul class="grid grid-width-1-4 grid-collapse" *ngIf="!selectedAddress.provinceWasSelected">
    <li *ngFor="let province of address.provinces">
      <a (click)="onSelectedProvince(province)">{{province}}</a>
    </li>
  </ul>
  <ul class="grid grid-width-1-4 grid-collapse" *ngIf="!selectedAddress.cityWasSelected">
    <li *ngFor="let c of address.citys">
      <a (click)="onSelectedCity(c.name)">{{c.name}}</a>
    </li>
  </ul>
  <ul class="grid grid-width-1-4 grid-collapse" *ngIf="!selectedAddress.countyWasSelected">
    <li *ngFor="let county of address.countys">
      <a (click)="onSelectedCounty(county)">{{county}}</a>
    </li>
  </ul>
</div>

